import React, { Component } from 'react';
// import store from '../../store3-module';
// 导入actions 所有的任务(包括同步任务和异步任务)
// 模仿vuex 中的映射辅助函数 mapState, mapMuaction,mapAction 来实现将store仓库中的state 数据和
// 派发任务的方法映射到当前组件自身的props 属性上

//01: 在react-redux 导出一个方法connect 方法
import { connect } from 'react-redux';

import {
    addcountaction,
    addcountactioAsync,
    addmoneyaction,
    getschoollist
} from '../../store3-module/actions/action'
class Mycls extends Component {
    constructor() {
        super()
        // 初始化赋值
        // this.state = store.getState()
        // console.log('state', this.state);

        // store.subscribe(() => this.setState(() => store.getState()))
    }
    render() {
        return (
            <div>
                {/* <p>count: {this.state.reducer.count}</p>
                <p><button onClick={this.addCount}>count+10 同步</button></p>
                <p><button onClick={this.addCountAsycn}>count+10 异步</button></p>
                <p>money:{this.state.reducer1.money}</p>
                <p><button onClick={this.addMoney}>moeny++</button></p> */}
                <hr />

                <p>count: {this.props.reducer.count}</p>
                <p><button onClick={this.props.addCount}>count+10 同步</button></p>
                <p><button onClick={this.props.addCountAsycn}>count+10 异步</button></p>
                <p>money:{this.props.reducer1.money}</p>
                <p><button onClick={this.props.addMoney}>moeny++</button></p>
                {/*  展示院校数据 */}
                {/* <ul>
                    {this.state.reducer2.schoolArr.map((item) => {
                        return <li key={item.id}>{item.school_name}</li>
                    })}
                </ul> */}


            </div>
        );
    };
    // 同步修改
    // addCount = () => {
    //     // 在页面中点击+,2秒后 实现count+1
    //     // setTimeout(() => {
    //     // store.dispatch({ type: '+', payload: 1 })
    //     // }, 2000)
    //     // 同步修改state
    //     store.dispatch(addcountaction(10))
    // };
    // // 异步修改
    // addCountAsycn() {
    //     store.dispatch(addcountactioAsync(10))
    // }

    // addMoney = () => {
    //     store.dispatch(addmoneyaction())
    // };
    componentDidMount() {
        // 页面初始化进行数据请求
        // store.dispatch(getschoollist())

    }
}

//02: 定义映射state函数
function mapstatetoprops(state) {
    //注意: 形参state 就是仓库中的数据state
    return state
}

//02: 定义映射方法函数
function mapdispatchtoprops(dispatch) {
    return {
        addCount() {
            dispatch(addcountaction(10))
        },
        addCountAsycn() {
            dispatch(addcountactioAsync(10))
        },
        addMoney() {
            dispatch(addmoneyaction())
        }
    }
}


// 03: 使用高阶组件强化函数 connect 将store 仓库中的state 数据和在当前页面定义的addCount
// addCountAsycn 和addMoney 方法映射到当前组件自身的props 属性上, 这样就可以通过props 属性来访问数据和修改数据了

export default connect(mapstatetoprops, mapdispatchtoprops)(Mycls);
